<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>员工管理</title>
  <link rel="stylesheet" href="css/emp.css">
</head>

<body>
  <div id="app">
    <div>{{title}}</div>

    <!-- 查询表单 -->
    <div>
      部门：
      <!-- <input type="text" v-model="queryInfo.deptId"> -->
      <span v-if="queryInfo.deptId==-1">全部门</span>
      <span v-else>
        {{deptInfo.selected.deptName}}
      </span>

      <button @click="deptInfo.mode='query';queryDept()">选择部门</button>

      姓名：<input type="text" v-model="queryInfo.employeeName">
      电话：<input type="text" v-model="queryInfo.phone">
      排序：
      <select v-model="queryInfo.orderBy">
        <option v-for="d in orderByList" :value="d.value">
          {{d.text}}
        </option>
      </select>

      <button @click="query">查询</button>

      {{queryInfo}}
    </div>

    <hr>

    <!-- 添加员工的部分 -->
    {{deptInfo.mode}}
    <div>
      <span v-if="addInfo.deptId==-1">选择部门</span>
      <span v-else>
        {{deptInfo.selectedAdd.deptName}}
      </span>

      <button @click="deptInfo.mode='add';queryDept()">选择部门</button>

      姓名：<input type="text" v-model="addInfo.employeeName">
      电话：<input type="text" v-model="addInfo.phone">
      <button @click="add">添加</button>

      {{addInfo}}
    </div>

    <hr>

    <!-- 显示数据部分 -->
    <table>

      <thead>
        <tr>
          <th>所属部门</th>
          <th>姓名</th>
          <th>电话</th>
          <th>信息最后修改时间</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="d in list">
          <td>{{d.dept.deptName}}</td>
          <td>{{d.employeeName}}</td>
          <td>{{d.phone}}</td>
          <td>{{d.lastupdate | formatDate}}</td>
          <td>
            <button @click="showModi(d)">修改</button>
            <button @click="del(d)">删除</button>
          </td>
        </tr>
      </tbody>

    </table>

    <div>{{page}}</div>

    <hr>


    <!-- 部门数据选择界面 -->
    <div class="dept-box" v-if="deptInfo.visible">

      <div>

        <table>

          <thead>
            <tr>
              <th>编号</th>
              <th>名称</th>
              <th>描述</th>
              <th>信息修改时间</th>
              <th>操作</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="d in deptInfo.list">
              <td>{{d.deptId}}</td>
              <td>{{d.deptName}}</td>
              <td>{{d.deptInfo}}</td>
              <td>
                {{d.lastupdate | formatDate}}
              </td>
              <td>
                <button @click="selectDept(d)">选中部门</button>
              </td>
            </tr>

          </tbody>

        </table>

        <!-- 分页的部分 -->
        <div>
          <a href="javascript:void(0)" @click="toDeptPage(1)">第一页</a>
          |
          <a href="javascript:void(0)" @click="toDeptPage(deptInfo.page.pageNumber-1)">上一页</a>
          |
          当前页/总页数/记录数：
          {{deptInfo.page.pageNumber}}
          /{{deptInfo.page.pageCount}}
          /{{deptInfo.page.total}}
          |
          <a href="javascript:void(0)" @click="toDeptPage(deptInfo.page.pageNumber+1)">下一页</a>
          |
          <a href="javascript:void(0)" @click="toDeptPage(deptInfo.page.pageCount)">最后一页</a>
        </div>

      </div>

    </div>



    <!-- 修改的部分 -->
    <div v-if="modiVisible">
      {{modiInfo.dept.deptName}}
      <button @click="deptInfo.mode='modi';queryDept()">选择部门</button>

      姓名：<input type="text" v-model="modiInfo.employeeName">
      电话：<input type="text" v-model="modiInfo.phone">

      <button @click="modify">保存</button>
      <button @click="modiVisible=false;deptInfo.visible=false;">关闭</button>
      <br>
      {{modiInfo}}
    </div>


  </div>

  <script src="../lib/axios.min.js"></script>
  <script src="../lib/qs.min.js"></script>
  <script src="../lib/spark-md5.min.js"></script>
  <script src="../lib/vue.min.js"></script>
  <script src="../js/filters.js"></script>
  <script src="../js/ajax.js"></script>

  <script src="js/emp.js"></script>
</body>

</html>